<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../themes/icon.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
</head>
<body>
		<div class="easyui-layout" data-options="fit:true">
			<div data-options="region:'north'" style="height:50px">
				   <a href="#" id="loadAllDataBtn" class="easyui-linkbutton" data-options="iconCls:'icon-add'">所有评论</a>
	
					<a href="#" id="addBtn" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加评论</a>
					<a href="#" id="removesBtn" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除多个</a>
				<input class="easyui-searchbox" data-options="prompt:'Please Input Value',searcher:doSearch" style="width:30%;height:auto">
	
			</div>
			<div data-options="region:'west',split:true" title="新闻分类" style="width:200px;">
				
					<ul id="tt"></ul>
				
			</div>
			<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
				<table id="dg"></table>
				
				<div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',closed:true" style="width:800px;height:400px;padding:10px">
					<form id="ff" method="post">
						<div style="margin-bottom:20px">
								<input class="easyui-textbox" name="_id" style="width:100%" data-options="label:'ID:'">
	
							<input class="easyui-textbox" name="title" style="width:100%" data-options="label:'标题:',required:true">
							<textarea id="xheditor " name="desc" class="xheditor" rows="25" style="width: 100%; border: 1px"></textarea>
						</div>
					</form>
					<!-- 添加按钮添加 -->
					<div style="text-align:center;padding:5px 0">
						<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
						<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
					</div>
				</div>
				
	
				<!-- 评论模块 -->
				<div id="comment" class="easyui-dialog" title="comment" data-options="iconCls:'icon-save',closed:true" style="width:800px;height:400px;padding:10px">
					<div data-options="region:'north" style="height:200px">
						
						<table id="dg"></table>
						
					</div>
					<!-- 数据内容 -->
					<div data-options="region:'south',title:'South Title',split:true" style="height:100px;width:80%">
						<form id="commentForm" method="post" style="height: 250px;">
							<div style="margin-top:20px">
								
									<input class="easyui-textbox" name="_id" style="width:100%" data-options="label:'ID:'">
	
								<lable style="vertical-align: top;">评论标题:</lable>
								<input class="easyui-textbox" name="title" style="width:90%;height:40px">
							</div>
							<!-- <div style="margin-top:20px"> -->
								<lable style="vertical-align: top;">评论内容:</lable>
								<textarea name="desc" class="xheditor" rows="10" cols="10" style="width:90%;height:100px;"></textarea>
							<!-- </div> -->
						</form>
						<div data-options="region:'south'" style="height:200px">
							<a href="javascript:void(0)" class="easyui-linkbutton" onclick="postForm()" style="width:80px">评论</a>
							<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">清空</a>
						</div>
					</div>
	
				</div>
			</div>
		</div>
		<script src="https://cdn.bootcss.com/jquery.serializeJSON/2.9.0/jquery.serializejson.js"></script>
		<script>
			//获取数据
			var cateId = null;
			$('#tt').tree({
				url: "http://localhost:3000/cate/list/1",
				method:'get',
				onClick: function(node){
					cateId = node._id;
					$('#dg').datagrid({
						queryParams:{
							cateId:node._id
						}
					}).datagrid('reload')
				}
			});
	
			//右边数据
			$('#dg').datagrid({
				url:'http://localhost:3000/news/list',
				method:'post',
				//当请求远程数据时，也发送附加参数。
				queryParams: {
					cateId: cateId
				},
				fit:true,
				pagination:true,
				pageSize:5,
				pageList:[5,10,15],
				columns:[[
					{field:'ck',title:'复选',checkbox:true},
					{field:'title',title:'新闻标题',width:100},
					{field:'desc',title:'内容',width:200},
					{field:'num',title:'评论数',width:80},
					{field:'operate',title:'操作', width:100,
						formatter: function(value,row,index){
							return "<a onclick=deleteData('"+ row._id+"')>删除</a>  <a onclick=editData('"+ row._id+"')>修改</a>  <a onclick=comm('"+ row._id+"')>评论</a>"
						}
					}
				]]
			});
			//添加按钮
			$("#addBtn").click(function(){
				$('#ff').form('clear');
				// console.log(cateId);
				if(cateId === null){
					$.messager.show({
					title:'信息提示',
					msg:'请选择分类，否则无法添加新闻',
					timeout:3000,
					showType:'show'
				});
				}else{
					$('#dlg').dialog('open');
				}
			});
	
			//添加数据submit
			function submitForm(){	
				var postData = $("#ff").serializeJSON();
					postData.num = 0;
					postData.cateId = cateId;
					// console.log(postData);
					if(postData._id.length>0){
						delete postData.cateId;
						// edit
						$.ajax({
							type:"put",
							url:"http://localhost:3000/news/data/"  + postData._id,
							data: postData,
							async:true
						}).done(function(res){
							// console.log(res);
							$.messager.show({
							title:'信息提示',
							msg:'数据修改成功',
							timeout:3000,
							showType:'show'
						});
						$('#dlg').dialog('close');
						$('#dg').datagrid('reload');
						})
					}else{	
						// add
						delete postData._id;
						$.ajax({
							type:"post",
							url:"http://localhost:3000/news/data",
							data: postData,
							async:true
						}).done(function(res){
							// 这里要做一件事
							$.messager.show({
								title:'信息提示',
								msg:'数据添加成功',
								timeout:3000,
								showType:'show'
							});
							$('#dlg').dialog('close');
							$('#dg').datagrid('reload');
						})
					}				
			}
			function clearForm(){
				$('#ff').form('clear');
				$('#commentForm').form('clear');
				$('textarea').val(' ');
			}
			
			//更新
			function editData(id){
				$.ajax({
					type:"put",
					url:"http://localhost:3000/news/data/" +id,
					async:true
				}).done(function(res){
					$('#ff').form('load', res);
					$('#dlg').dialog('open');
				})
			}
	
	//--------------评论模块
	var parentid = null;
	var num = null ;
			//评论模块
			function comm(id){
				parentid = id;
				console.log(id);
				$.ajax({
					type:"post",
					url:"http://localhost:3000/comm/list",
					async:true
				}).done(function(res){
					$('#comment').dialog('open');
					$('#comment #dg').datagrid({
						queryParams:{
							cateId:id
						}
					}).datagrid('reload')
				})
			}
			//评论表
			$('#comment #dg').datagrid({
				url:'http://localhost:3000/comm/list',
				method:'post',
				fit:true,
				pagination:true,
				pageSize:5,
				pageList:[5,10,15],
				columns:[[
					{field:'ck',title:'复选',checkbox:true},
					{field:'title',title:'评论标题',width:100},
					{field:'desc',title:'评论内容',width:200},
					{field:'operate',title:'操作', width:80,
						formatter: function(value,row,index){
							return "<a onclick=deletecom('"+ row._id+"')>删除</a> <a onclick=updatacom('"+ row._id+"')>修改</a>"
						}
					}
				]]
			});
			//添加评论按钮
			function postForm(){
				//评论数= 搜索total
				$.ajax({
					type:"post",
					url:"http://localhost:3000/comm/list",
					async:true,
					data:{
						cateId:parentid
					}
				}).done(function(data){
					num=data.total;
					console.log(num);
				});	
				var postData = $("#commentForm").serializeJSON();
				postData.cateId = parentid;
				console.log(postData);
				if(postData._id.length>0){
						delete postData.cateId;
						// edit
						$.ajax({
							type:"put",
							url:"http://localhost:3000/comm/data/"  + postData._id,
							data: postData,
							async:true
						}).done(function(res){
							clearForm();
							$.messager.show({
								title:'信息提示',
								msg:'数据修改成功',
								timeout:3000,
								showType:'show'
							});
							   $('#comment #dg').datagrid('reload');
						})
					}else{	
						// add
						delete postData._id;
						
						$.ajax({
							type:"post",
							url:"http://localhost:3000/comm/data",
							data: postData,
							async:true
						}).done(function(res){
							$.messager.show({
								title:'信息提示',
								msg:'数据添加成功',
								timeout:3000,
								showType:'show'
							});
							$('#comment #dg').datagrid('reload');
							clearForm();
							// 成功后评论数要更新
							$.ajax({
								type:"put",
								url:"http://localhost:3000/news/data/" + parentid,
								data: {num:++num},
								async:true
							}).done(function(res){
								$('#dg').datagrid('reload');
							});
						});
					}
			}				
			//删除评论
			function deletecom(id){
				console.log(id);
				$.messager.confirm('确认删除', '你确认删除数据吗？', function(r){
					if (r){
						$.ajax({
							type:"delete",
							url:"http://localhost:3000/comm/data/" + id,
							async:true
						}).done(function(res){
							// 成功后评论数要更新
							$('#comment #dg').datagrid('reload');
							num < 0 ? 0 : num ;
							$.ajax({
								type:"put",
								url:"http://localhost:3000/news/data/" + parentid,
								data: {num:--num},
								async:true
							}).done(function(res){
								$('#dg').datagrid('reload');
							});
						})
					}
				});
			}
			//修改评论
			function updatacom(id){
				$.ajax({
					type:"put",
					url:"http://localhost:3000/comm/data/" +id,
					async:true
				}).done(function(res){
					console.log(res);
					$('#comment #dg').datagrid('reload');
					$('#commentForm').form('load', res);
				})
			}
			
	
			//删除按钮
			function deleteData(id){
				$.messager.confirm('确认删除', '你确认删除数据吗？', function(r){
					if (r){
						$.ajax({
							type:"delete",
							url:"http://localhost:3000/news/data/" + id,
							async:true
						}).done(function(res){
							$("#dg").datagrid('reload');
						})
					}
				});
			}
			//删除多个按钮
			$("#removesBtn").click(function(){
				var rows = $("#dg").datagrid('getSelections');
				if(rows.length>0){
					var ids = [];
					rows.forEach(function(item,idx){
						ids.push(item._id)
					})
					console.log(ids);
					$.messager.confirm('确认删除', '你确认删除数据吗？', function(r){
						if (r){
							for(var i=0;i<ids.length;i++){
								$.ajax({
									type:"delete",
									url:"http://localhost:3000/news/data/" + ids[i],
									data:{
										ids: ids.toString()
									},
									async:true
								}).done(function(res){
									$("#dg").datagrid('reload');
								});
							}
						}
					});	
				}
			})
			//所有新闻
				$("#loadAllDataBtn").click(function(){
					cateId = null;
					 $("#dg").datagrid({
						queryParams: {
							cateId: cateId
						}
					}).datagrid('reload');
				})
				//查询
				function doSearch(value){
				$("#dg").datagrid({
					queryParams: {
						cateId: cateId,
						title: value
					}
				}).datagrid('reload');
			}
		</script>
	</body>
	</html>